<template>
	<view>
		<view class="top-box" :style="'height:'+navHeight+'rpx;'">
			<view class="top-view" style="bottom: 0rpx;">
				<view class="button">
					<text class="icon zhuye" @click="$goto('/pages/index')"></text>
					<text class="icon saoyisao"></text>
				</view>
				<view class="title">{{tabList[tabIndex].text}}</view>
			</view>
		</view>
		<view :style="'margin-top:'+navHeight+'rpx;'"></view>
		<swiper :current="tabIndex" class="erp-box" duration="300" @change="changeTab">
			<swiper-item v-for="(tabItem,tabIndex) in tabList" :key="tabIndex">
				<scroll-view v-if="tabIndex == 0" class="erp-home" scroll-y>
					
				</scroll-view>
				<scroll-view v-if="tabIndex == 1" class="erp-work" scroll-y>
					<view class="work-item">
						
					</view>
				</scroll-view>
				<scroll-view v-if="tabIndex == 2" class="erp-affair" scroll-y>
					<view v-if="affair.length > 0">
					
					</view>
					<view v-else class="empty"><view class="icon hezi"></view><view>暂无数据</view></view>
				</scroll-view>
				<scroll-view v-if="tabIndex == 3" class="erp-user" scroll-y>
					
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="tabbar">
			<view class="tabbar-item" :class="tabIndex==index ? 'active' : ''" v-for="(item, index) in tabList" :key="index"  @click="changeTab(index)">
				<view class="tabbar-item-icon">
					<image :src="tabIndex==index ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<view class="tabbar-item-text" :class="tabIndex==index ? 'active' : ''">{{item.text}}</view>
			</view>
		</view>
	</view>
</template> 

<script>
	export default {
		data() {
			return {
				navHeight : 0,
				tabList : [
					{
						text : '看板',
						iconPath : '/static/work.png',
						selectedIconPath : '/static/work_on.png'
					},
					{
						text : '工作',
						iconPath : '/static/cate.png',
						selectedIconPath : '/static/cate_on.png'
					},
					{
						text : '待办',
						iconPath : '/static/affair.png',
						selectedIconPath : '/static/affair_on.png'
					},
					{
						text : '我的',
						iconPath : '/static/user.png',
						selectedIconPath : '/static/user_on.png'
					},
				],
				tabIndex: 0
			};
		},
		onLoad(options){
			let that = this
			uni.getSystemInfo({
				success: function (res) {
					that.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 80
				}
			})
			uni.hideShareMenu()
		},
		methods: {
			loadData(){
				
			},
			changeTab(e){
				if(typeof(e) == 'number'){
					this.tabIndex = e
				}else{
					this.tabIndex = e.target.current
				}
			}
		}
	}
</script>

<style lang="scss">
	.top-view{
		display: flex;
		position: absolute;
		bottom: 0rpx;
		padding: 10rpx;
		width: 100%;
		.button {
			width: 200rpx;
			.icon {
				font-size: 36rpx;
				margin: 5rpx 20rpx;
				padding: 10rpx;
				line-height: 50rpx;
				border-radius: 20rpx;
				border : 1rpx solid #eeeeee;
			}
		}
		.title{
			width: calc(100% - 400rpx);
			font-size: 28rpx;
			text-align: center;
		}
	}
	@keyframes fadeInUp {
		from {
			transform: translate3d(0, 100%, 0);
		}
		to {
			transform: none;
		}
	}
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		border-top: 0.5px solid #d5d5d5;
		display: flex;
		font-size: 0;
		background: #fff;
		z-index: 999;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-name: fadeInUp;
	}
	.tabbar-item {
		flex: 1;
		text-align: center;
		overflow: hidden;
		box-sizing: border-box;
		padding: 8rpx 10rpx 0;
		color: #888888;
	}
	.tabbar-item-icon {
		margin-bottom: 6rpx;
		height: 56rpx;
	}
	.tabbar-item-icon image {
		width: 56rpx;
		height: 56rpx;
	}
	.tabbar-item-text {
		font-size: 20rpx;
		line-height: 20rpx;
	}
	.tabbar-item.active {
		color: #45b984;
	}
	.erp-box{
		width: 100%;
		height: 100vh;
		.news-list{
			display:flex;
			flex-wrap:wrap;
			height: 100%;
			.news-item{
				display: flex;
				justify-content: flex-start;
				background: #fff;
				border-bottom:1px solid #eee;
				padding: 10upx;
				width: 100%;
				.news-img{
					width: 20%;
					height: 100upx;
					image{
						max-width: 100%;
						height: 100%;
					}
				}
				.news-info{
					width: 80%;
					padding-left: 15upx;
					.news-title{
						height: 70upx;
						line-height: 35upx;
						padding-bottom: 5upx;
						color: #555;
						font-size: 30upx;
						letter-spacing: 0;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal!important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.news-other{
						display: flex;
						justify-content: space-between;
						line-height: 30upx;
						font-size: 20upx;
						color: #bbb;
						text-align: right;
						width: 100%;
					}
				}
			}
		}
	}
</style>
